<template>
  <div class="xtx-bread-item">
    <!-- 如果有to就设置跳转 -->
    <RouterLink v-if="to" :to="to"><slot></slot></RouterLink>
    <span v-else><slot ></slot></span>
  </div>
  <i>{{separator}}</i>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'XtxBreadItem',
  props: { to: { type: String, default: '' } },
  setup () {
    const separator = inject('separator')
    return { separator }
  }
}
</script>

<style lang="less" scoped>
  .xtx-bread-item{
     a {
      color: #666;
      transition: all .4s;
      &:hover {
        color: @xtxColor;
      }
    }
    i {
      font-size: 12px;
      margin-left: 5px;
      margin-right: 5px;
      line-height: 22px;
    }
  }

</style>
